<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    应用需求:
      1. 根据指定的数据对象来动态显示姓名和年龄
      2. 当姓名或年龄输入时, 实时保存到数据对象中, 并输出   input事件
    -->
    姓名: <input type="text" id="name"><br>
    年龄: <input type="text" id="age"><br>

    <script>
      const p = {
        name: 'tom',
        age: 12
      }

      // 1. 根据指定的数据对象来动态显示姓名和年龄
      const nameInput = document.getElementById('name')
      const ageInput = document.querySelector('#age')
      nameInput.value = p.name
      ageInput.value = p.age

      // 2. 当姓名或年龄输入时, 实时保存到数据对象中, 并输出
      // nameInput.oninput = function (event) {
      //   p.name = event.target.value
      //   console.log(p)
      // }
      // ageInput.oninput = function (event) {
      //   p.age = event.target.value
      //   console.log(p)
      // }

      // 我要做的事件, 需要的数据, 前期只能确定部分, 后面再确定其它的
      function handleChange(propName) {
        return (event) => {
          p[propName] = event.target.value
          console.log(p)
        }
      }

      // function handleChange(event, propName) {
      //   p[propName] = event.target.value
      //   console.log(p)
      // }

      nameInput.oninput = handleChange
      ageInput.oninput = handleChange





    </script>

    <script>
      /*
      回调函数 
      高阶函数
      柯里化函数
      */
      /* 
      柯里化(curry)函数:
        将接收多个参数的函数改造, 分多次接收参数的函数
      惰性求值(特点): 开始不进行计算, 等到所有的参数数据都传入后, 才进行计算返回
      */
      function sum(a, b) {
        return a + b;
      }
      function sum2(a) {
        return (b) => {
          return a + b
        }
      }
    </script>
  </body>
</html>
